<template>
  <div>
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="特殊资源" prop="resource">
        <el-radio-group v-model="ruleForm.isUsable">
          <el-radio :label="true">启用</el-radio>
          <el-radio :label="false">不启用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="称谓自定义" prop="name">
        <el-input v-model="ruleForm.name" style="width:200px"/>
      </el-form-item>
      <el-form-item label="获取规则">
        <el-table
          v-loading="loadingFlag"
          :data="tableData.length === 0 ? initData : tableData"
          :span-method="objectSpanMethod"
          border
          style="width: 100%; margin-top: 20px"
        >
          <el-table-column prop="id" min-width="10" align="center">
            <template slot-scope="scope">{{ scope.row.type }}</template>
          </el-table-column>
          <el-table-column prop="title" label="行为" min-width="20" align="center">
            <template slot-scope="scope">{{ scope.row.behavior }}</template>
          </el-table-column>
          <el-table-column label="开关" align="center" min-width="10">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.behaviorSwitch"/>
            </template>
          </el-table-column>
          <el-table-column label="key" min-width="10" align="center">
            <template slot-scope="scope">{{ scope.row.key }}</template>
          </el-table-column>
          <el-table-column prop="score" label="分值(分/次)" min-width="5" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.scores" :disabled="!scope.row.behaviorSwitch"/>
            </template>
          </el-table-column>
          <el-table-column prop="amount3" label="每日上限(次)" min-width="5" align="center">
            <template slot-scope="scope">
              <el-input v-if="scope.row.hasLimit === true" v-model="scope.row.limitValue" :disabled="!scope.row.behaviorSwitch"/>
              <div v-if="scope.row.hasLimit === false">--</div>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveInfo">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {getIntegral, getIntegralRules, updateIntegral, updateIntegralRules} from '@/api/operate/integral' // 数据接口
  import {getTenantId, getUserId} from '@/utils/auth'

  export default {
    data() {
      return {
        loadingFlag: false,
        ruleForm: {
          isUsable: true,
          name: ''
        },
        initData: [
          {
            type: '交流',
            behavior: '课程或班级中提出1个问题',
            behaviorSwitch: true,
            scores: '1',
            key: 'ask_questions',
            limitValue: '1',
            hasLimit: true
          },
          {
            type: '交流',
            behavior: '课程或班级中回答1个问题',
            behaviorSwitch: true,
            scores: '1',
            key: 'answer_questions',
            limitValue: '1',
            hasLimit: true
          },
          {
            type: '交流',
            behavior: '课程或班级中发起1个话题',
            behaviorSwitch: true,
            scores: '1',
            key: 'Initiate_topic',
            limitValue: '1',
            hasLimit: true
          },
          {
            type: '交流',
            behavior: '课程或班级中回复1个话题',
            behaviorSwitch: true,
            scores: '1',
            key: 'reply_topic',
            limitValue: '1',
            hasLimit: true
          },
          {
            type: '交流',
            behavior: '课程或班级中话题、问题被设为精华',
            behaviorSwitch: true,
            scores: '1',
            key: 'essence',
            limitValue: '',
            hasLimit: false
          },
          {
            type: '交流',
            behavior: '课程或班级中完成1个评价',
            behaviorSwitch: true,
            scores: '1',
            key: 'evaluate',
            limitValue: '',
            hasLimit: false
          },
          {
            type: '活跃',
            behavior: '每日登录',
            behaviorSwitch: true,
            scores: '1',
            key: 'daily_login',
            limitValue: '',
            hasLimit: false
          }
        ],
        tableData: [],
        rules: {}
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      objectSpanMethod({row, column, rowIndex, columnIndex}) {
        if (columnIndex === 0) {
          if (rowIndex % 6 === 0) {
            return {
              rowspan: 6,
              colspan: 1
            }
          } else {
            return {
              rowspan: 0,
              colspan: 0
            }
          }
        }
      },
      getData() {
        this.loadingFlag = true;
        getIntegral(getTenantId()).then(response => {
          if (response.data.item) {
            this.ruleForm = response.data.item;
            this.$emit('isUnable', {isUsable: this.ruleForm.isUsable});
            getIntegralRules(this.ruleForm.id).then(rules => {
              if (rules.data.items != null) {
                this.tableData = rules.data.items
              }
            })
          }
        });
        this.loadingFlag = false
      },
      saveInfo() {
        this.$emit('isUnable', {isUsable: this.ruleForm.isUsable});
        this.ruleForm.userId = getUserId();
        this.ruleForm.tenantId = getTenantId();
        updateIntegral(this.ruleForm).then(response => {
          const id = response.data.id;
          if (this.tableData.length === 0) {
            this.tableData = this.initData
          }
          this.tableData.map(item => {
            item.integralId = id;
            item.tenantId = getTenantId()
          });
          updateIntegralRules(this.tableData).then(() => {
            this.$notify({
              title: '成功',
              message: '保存成功',
              type: 'success',
              duration: 2000
            })
          })
        })
      }
    }
  }
</script>

<style lang="scss">
</style>
